<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>优惠券</title>
		<link rel="stylesheet" href="css/swiper.min.css">
		<script src="js/jquery-1.10.1.min.js"></script>
		<script src="js/swiper.min.js"></script>



	<link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
	<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<link rel="stylesheet" type="text/css" href="css/money.css" />


		<style type="text/css">
			header {
				width: 100%;
				overflow: hidden;
			}
			
			main {
				overflow: hidden;
			}
			
			.tabs {
				height: 0.7rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
			}
			
			.tabs a {
				flex: 1;
				height: 0.7rem;
				font-size: 0.28rem;
				font-weight: 400;
				line-height: 0.7rem;
				text-align: center;
				border-bottom: 2px solid #D8D8D8;
				color: rgba(51, 51, 51, 1);
			}
			.tabs a:nth-child(2):before{
				content: "";
				display: block;
				position: absolute;
				top:.17rem;
				width: 0.02rem;
				height: 0.34rem;
				background: #D8D8D8;
				left: 32%;
			}
			.tabs a:nth-child(2):after{
				content: "";
				display: block;
				position: absolute;
				top:.17rem;
				width: 0.02rem;
				height: 0.34rem;
				background: #D8D8D8;
				left: 67%;
			}
			.tabs .active{
					border-bottom: 2px solid rgba(238, 193, 79, 1)!important;
			}
			.tabs .active{
				color: rgba(238, 193, 79, 1) !important;
			}
			
			.box {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- header -->
			<header>
				<img src="images/top.png">
				<a href="selfcenter.html"><span class="iconfont icon-left"></span></a>
				<span class="s1">优惠券</span>
				<span></span>
			</header>


			<main>
				<div class="tabs">
					<a href="#" class="active">未使用</a>
					<a href="#">已使用</a>
					<a href="#">已失效</a>
				</div>
				<div id="tabs-container" class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<ul class="news-list">
						<div class="box">
						
							<div class="main2">
								<form action="" method="">
									<input type="text" name="" id="" value="" />
									<span class="s1">请输入兑换码</span>
									<input type="button" name="" id="btn" value="" />
									<span class="s2">兑换</span>
								</form>
							</div>
						
						</div>

							</ul>
						</div>

						<!-- 2 -->
						<div class="swiper-slide">
							<ul class="news-list">
								<div class="box">
								
									<div class="main2">
										<form action="" method="">
											<input type="text" name="" id="" value="" />
											<span class="s1">请输入兑换码</span>
											<input type="button" name="" id="btn" value="" />
											<span class="s2">兑换</span>
										</form>
									</div>
								
								</div>
							</ul>
						</div>

						<!-- 3 -->
						<div class="swiper-slide">
							<ul class="news-list">
						
<div class="box">


							<div class="box">
							
								<div class="main2">
									<form action="" method="">
										<input type="text" name="" id="" value="" />
										<span class="s1">请输入兑换码</span>
										<input type="button" name="" id="btn" value="" />
										<span class="s2">兑换</span>
									</form>
								</div>
							
							</div>

							</ul>
						</div>

					</div>
				</div>
			</main>
		</div>
		<script type="text/javascript">
			window.onload = function() {






				var tabsSwiper = new Swiper('#tabs-container', {
					speed: 500,
					on: {
						slideChangeTransitionStart: function() {
							$(".tabs .active").removeClass('active');
							$(".tabs a").eq(this.activeIndex).addClass('active');
						}
					}
				})
				$(".tabs a").on('click', function(e) {
					e.preventDefault()
					$(".tabs .active").removeClass('active')
					$(this).addClass('active')
					tabsSwiper.slideTo($(this).index())
				})
			}
		</script>
	</body>
</html>
